<template>
  <div class="page-container">
    <div style="width: 100%; height: 100%">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import { Graph, Node, Edge, Shape, Line, Path, Curve, Point } from "@antv/x6";
import { GridLayout, DagreLayout } from "@antv/layout";
import dagre from "dagre";

export default {
  data() {
    return {
      graph: null,
    };
  },
  methods: {
    initGraph() {
      const container = document.getElementById("container");
      this.graph = new Graph({
        container: container,
        connecting: {
          // snap: true,
          // router: {
          //   name: "manhattan",
          //   args: {
          //     step: 20,
          //     startDirections: ["right"],
          //     endDirections: ["left"],
          //   },
          // }, // 路由模式
          router: {
            name: "router1",
            // args: {
            //   step: 20,
            //   startDirections: ["right"],
            //   endDirections: ["left"],
            // },
          }, // 路由模式

          // router: {
          //   name: "oneSide", // oneSide  er
          //   args: { side: "right" },
          // },
          // router: {
          //   name: "orth", // oneSide  er
          //   args: {
          //     padding: {
          //       // vertical: 10,
          //       // right:100
          //       // horizontal: 100
          //       // left?: number
          //       // top?: number
          //       // right?: number
          //       // bottom?: number
          //     },
          //   },
          // },

          highlight: true,
        },

        // connector: {
        //   name: "smooth",

        // },

        // width: container.offsetWidth,
        // height: container.offsetHeight,
        // autoResize: true, // 自适应
        // panning: true, // 鼠标按下画布后移动时会拖拽画布，
        // mousewheel: true, // 滚动鼠标滚轮会缩放画布。
        // snapline: true, // 对齐线
        // background: {
        //   color: "#F2F7FA",
        // },

        // grid: {
        //   visible: true,
        //   type: "doubleMesh",
        //   args: [
        //     {
        //       color: "#eee", // 主网格线颜色
        //       thickness: 1, // 主网格线宽度
        //     },
        //     {
        //       color: "#ddd", // 次网格线颜色
        //       thickness: 1, // 次网格线宽度
        //       factor: 4, // 主次网格线间隔
        //     },
        //   ],
        // },
      });
      // 下面为画布增加对齐线功能，当移动的节点与其他节点对齐时，会自动出现对齐线，可以方便用户进行位置排版。
      //   this.graph.use(
      //     new Snapline({
      //       enabled: true,
      //     })
      //   );
    },
    regesterGraph() {
      Graph.registerNode(
        "custom-node",
        {
          inherit: "rect",
          width: 100,
          height: 40,
          attrs: {
            body: {
              stroke: "#8f8f8f",
              strokeWidth: 1,
              fill: "#fff",
              rx: 6,
              ry: 6,
            },
          },
          ports: {
            groups: {
              left: {
                position: "left",
                attrs: {
                  circle: {
                    // display: "none",
                    r: 6,
                    magnet: true,
                    stroke: "#1f89cc",
                    strokeWidth: 2,
                    fill: "#fff",
                  },
                },
              },
              right: {
                position: "right",
                attrs: {
                  circle: {
                    // display: "none",
                    r: 6,
                    magnet: true,
                    stroke: "#1f89cc",
                    strokeWidth: 2,
                    fill: "#fff",
                  },
                },
              },
            },
          },
        },
        true
      );

      // 自定义路由
      Graph.registerRouter("router1", (vertices, args, view) => {
        const points = vertices.map((p) => Point.create(p));
        // console.log("view", view);
        const sourceCorner = view.sourceBBox.getCenter();
        const targetCorner = view.targetBBox.getCenter();
        // console.log("sourceCorner", sourceCorner);
        // console.log("targetCorner", targetCorner);
        points.push({
          x: sourceCorner.x + 10,
          y: sourceCorner.y,
        });
        points.push({
          x: (targetCorner.x - sourceCorner.x) / 2 + sourceCorner.x,
          y: sourceCorner.y,
        });
           points.push({
          x: (targetCorner.x - sourceCorner.x) / 2 + sourceCorner.x,
          y: targetCorner.y,
        });

        points.push({
          x: targetCorner.x - 20,
          y: targetCorner.y,
        });
        // console.log("points", points);
        return points;
      });
    },
    showData() {
      const graph = this.graph;

      const model = {
        nodes: [
          {
            shape: "custom-node",
            label: "1",
            id: "1",
            ports: {
              // 声明连接桩
              items: [
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          {
            shape: "custom-node",
            label: "2",
            id: "2",
            ports: {
              items: [
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          {
            shape: "custom-node",
            label: "1-1",
            id: "1-1",
            ports: {
              items: [
                {
                  id: "left",
                  group: "left",
                },
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          {
            shape: "custom-node",
            label: "1-2",
            id: "1-2",
            ports: {
              items: [
                {
                  id: "left",
                  group: "left",
                },
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          {
            shape: "custom-node",
            label: "1-3",
            id: "1-3",
            ports: {
              items: [
                {
                  id: "left",
                  group: "left",
                },
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          {
            shape: "custom-node",
            label: "1-4",
            id: "1-4",
            ports: {
              items: [
                {
                  id: "left",
                  group: "left",
                },
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          {
            shape: "custom-node",
            label: "1-5",
            id: "1-5",
            ports: {
              items: [
                {
                  id: "left",
                  group: "left",
                },
                {
                  id: "right",
                  group: "right",
                },
              ],
            },
          },
          // {
          //   shape: "custom-node",
          //   label: "2-1",
          //   id: "2-1",
          //   ports: {
          //     items: [
          //       {
          //         id: "left",
          //         group: "left",
          //       },
          //       {
          //         id: "right",
          //         group: "right",
          //       },
          //     ],
          //   },
          // },
          // {
          //   shape: "custom-node",
          //   label: "2-2",
          //   id: "2-2",
          //   ports: {
          //     items: [
          //       {
          //         id: "left",
          //         group: "left",
          //       },
          //       {
          //         id: "right",
          //         group: "right",
          //       },
          //     ],
          //   },
          // },
          // {
          //   shape: "custom-node",
          //   label: "2-3",
          //   id: "2-3",
          //   ports: {
          //     items: [
          //       {
          //         id: "left",
          //         group: "left",
          //       },
          //       {
          //         id: "right",
          //         group: "right",
          //       },
          //     ],
          //   },
          // },
          // {
          //   shape: "custom-node",
          //   label: "2-4",
          //   id: "2-4",
          //   ports: {
          //     items: [
          //       {
          //         id: "left",
          //         group: "left",
          //       },
          //       {
          //         id: "right",
          //         group: "right",
          //       },
          //     ],
          //   },
          // },
          // {
          //   shape: "custom-node",
          //   label: "2-5",
          //   id: "2-5",
          //   ports: {
          //     items: [
          //       {
          //         id: "left",
          //         group: "left",
          //       },
          //       {
          //         id: "right",
          //         group: "right",
          //       },
          //     ],
          //   },
          // },
        ],
        edges: [
          {
            source: {
              cell: "1",
              port: "right",
            },

            target: {
              cell: "1-1",
              port: "left",
            },
          },
          {
            source: {
              cell: "1",
              port: "right",
            },
            target: {
              cell: "1-2",
              port: "left",
            },
          },
          {
            source: {
              cell: "1",
              port: "right",
            },
            target: {
              cell: "1-3",
              port: "left",
            },
          },
          {
            source: {
              cell: "1",
              port: "right",
            },
            target: {
              cell: "1-4",
              port: "left",
            },
          },
          // {
          //   source: {
          //     cell: "1",
          //     port: "right",
          //   },
          //   target: {
          //     cell: "1-5",
          //     port: "left",
          //   },
          // },
          // {
          //   source: {
          //     cell: "2",
          //     port: "right",
          //   },

          //   target: {
          //     cell: "2-1",
          //     port: "left",
          //   },
          // },
          // {
          //   source: {
          //     cell: "2",
          //     port: "right",
          //   },
          //   target: {
          //     cell: "2-2",
          //     port: "left",
          //   },
          // },
          // {
          //   source: {
          //     cell: "2",
          //     port: "right",
          //   },
          //   target: {
          //     cell: "2-3",
          //     port: "left",
          //   },
          // },
          // {
          //   source: {
          //     cell: "2",
          //     port: "right",
          //   },
          //   target: {
          //     cell: "2-4",
          //     port: "left",
          //   },
          // },
          // {
          //   source: {
          //     cell: "2",
          //     port: "right",
          //   },
          //   target: {
          //     cell: "2-5",
          //     port: "left",
          //   },
          // },
        ],
      };

      const gridLayout = new DagreLayout({
        type: "dagre",
        rankdir: "LR",
        align: "UL",
        ranksep: 50,
        nodesep: 10,
        controlPoints: true,
      });

      const newModel = gridLayout.layout(model);

      graph.fromJSON(newModel);

      this.graph.centerContent(); // 居中显示
    },
  },
  mounted() {
    this.initGraph();
    this.regesterGraph();
    this.showData();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  #container {
    width: 800px;
    height: 600px;
  }
}
</style>
